<script>
import { punishments } from '@/api/punishment'
import { value } from '@/utils/kris_utils'
import WithDialog from '@/components/WithDialog/withDialog.vue'
export default {
    components:{
        WithDialog
    },
    props:{
        userID:{
            required:true,
            default:null
        }
    },
    data(){
        return {
            dialogVisible:false,
            isLoading:false,
            data:[],
            pagination:{
                current:1,
                total:0,
                size:10
            },
            typeOptions:[
                { label:'奖励', value:1 },
                { label:'扣除', value:2 }
            ],
            executionOptions:[
                { label:'随当月发放', value:1 },
                { label:'不随当月发放', value:0 }
            ]
        }
    },
    computed:{
        dataFormatted(){
            return this.data.map((item,index) => {
                const {amount,type,is_month,content,operator,id,created_at,updated_at} = item
                return {
                    id,
                    amount:parseFloat(amount),
                    type,
                    isMonth:is_month,
                    reason:content,
                    operator,
                    createdAt:created_at,
                    updatedAt:updated_at
                }
            })
        },
        ready(){
            return this.dialogVisible && (typeof this.userID === 'number' && !isNaN(this.userID))
        }
    },
    methods:{
        optionsFormatter(options,value){
            let option = options.find(item => item.value === value)
            return option?.label ?? ''
        },
        toPersonalProfile(employee){
            this.$router.push({
                path: `/personnel-files/show/${employee.id}`,
                query: { tag_title: employee.username + '-查看', show: true }
            })
        },
        beforeClose(e){
            this.pagination.current = 1
            e(true)
        },

        openDialog(){
            this.dialogVisible = true
        },
        closeDialog(){
            this.pagination.current = 1
            this.dialogVisible = false
        },

        handlePageChange(currentPage) {
            this.pagination.current = currentPage
            this.fetchData()
        },
        handlePageSizeChange(size) {
            this.pagination.size = size
            this.fetchData()
        },

        async fetchData(){
            try {
                if(typeof this.userID !== 'number' || isNaN(this.userID))
                    return 

                this.isLoading = true
                
                let params = {
                    page:this.pagination.current,
                    paginate:this.pagination.size,
                    user_id:this.userID
                }

                let result = await punishments(params)
                    .catch(err => {
                        throw new Error(value(err,'response.data.message','获取奖惩记录失败'))
                    })
                
                if(result.code !== 200)
                    throw new Error(result.message ?? '获取奖惩记录失败')

                this.data = result.data
                this.pagination.total = result.meta?.total ?? 0
            }catch(e){
                this.$message.error(e.message)
            }finally{
                this.isLoading = false
            }
        }
    },
    watch:{
        ready(ready){
            if(!ready)return

            this.pagination.current = 1
            this.fetchData()
        }
    },
    created(){
        this.fetchData()
    }
}
</script>

<template>
    <div>
        <el-button type="text">{{pagination.total}}条奖惩记录</el-button>
        <el-button v-if="pagination.total > 0" type="text" @click="openDialog">
            <i class="el-icon-view" /> 
            点击查看
        </el-button>

        <WithDialog 
            :visible.sync="dialogVisible"
            :showCancelBtn="false"
            title="奖惩记录"
            @confirm="closeDialog"
        >
        <el-table
            :data="dataFormatted"
            stripe
            style="width: 100%"
            v-loading="isLoading"
        >
            <el-table-column prop="type" label="奖惩类型">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.type === 1"> {{ optionsFormatter(typeOptions,scope.row.type) }} </el-tag>
                    <el-tag type="warning" v-else> {{ optionsFormatter(typeOptions,scope.row.type) }} </el-tag>
                </template>
            </el-table-column>

            <el-table-column label="执行人" >
                <template slot-scope="scope">
                    {{ scope.row.operator.username }}
                </template>
            </el-table-column>

            <el-table-column prop="amount" label="金额" />

            <el-table-column prop="isMonth" label="执行时间">
                <template slot-scope="scope">
                    {{ optionsFormatter(executionOptions,scope.row.isMonth) }}
                </template>
            </el-table-column>

            <el-table-column label="奖惩原因">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>奖惩原因概览：</p>
                        <p>{{ scope.row.reason }}</p>

                        <div slot="reference" class="name-wrapper">
                            {{ scope.row.reason }}
                        </div>
                    </el-popover>
                </template>
            </el-table-column>

            <el-table-column prop="createdAt" label="创建时间" />

            <el-table-column prop="updatedAt" label="最后修改" />
        </el-table>

        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="pagination.current"
          :page-sizes="[10, 50, 100]"
          :page-size="pagination.size"
          :total="pagination.total"
          :disabled="isLoading"
          @size-change="handlePageSizeChange"
          @current-change="handlePageChange"
        />
        </WithDialog>
    </div>
</template>

<style lang="scss">

</style>